<template lang="pug">
  .membersApply
    //- h1 {{ msg }}    
    .membersList
      div.member(v-for="(user,i) in memberList" :key="user.id")
        cell.user(primary="content" value-align="left") 
          img(slot="icon" width="80" style="display:block;margin-right:5px;" :src="user.avatar")
          div.pull-left(title="value")
            .nickname {{user.nickname}}
            .id ID : {{user.uid}}
          div.actions.pull-right
            button(@click="agree(user)") 同意
            button.refuse(@click="refuse(user)") 拒绝
    div
      confirm( v-model="showAgree"  :title="'是否同意【'+selectMember.nickname+'】加入工会'"  @on-cancel="onCancel('agree')" @on-confirm="onConfirm('agree')")
      confirm( v-model="showRefuse"  :title="'是否拒绝【'+selectMember.nickname+'】加入工会'"  @on-cancel="onCancel('refuse')" @on-confirm="onConfirm('refuse')")
</template>

<script>
import memberService from '@/api/member'

export default {
  name: 'membersApply',
  data () {
    return {
      pagination: {
        page: 1,
        pagesize: 99
      },
      memberList: [],
      selectMember: {},
      showAgree: false,
      showRefuse: false
    }
  },
  created () {
    document.title = '新成员申请'
    this.getGuildApplyList()
  },
  methods: {
    getGuildApplyList () {
      memberService.GuildApplyList(this.pagination)
        .then(res => {
          this.memberList = res.result.list
          console.log(res)
        })
    },
    agree (user) {
      this.selectMember = user
      this.showAgree = true
    },
    refuse (user) {
      this.selectMember = user
      this.showRefuse = true
    },
    onConfirm (type) {
      memberService.EditApply({
        oid: this.selectMember.oid,
        operate: (type === 'agree') ? 1 : 2
      })
        .then(res => {
          var index = this.memberList.findIndex(m => { return m.id === this.selectMember.id })
          this.memberList.splice(index, 1)
          this.showAgree = false
        })
    },
    onCancel (type) {
      // var index  = this.memberList.findIndex(m=>{return m.id === this.selectMember.id})
      // this.memberList.splice(index,1)
      // this.showRefuse = false
    }
  },
  mounted () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">

.membersApply  {
  background-color: #f2f2f2;
  .member{
    padding-bottom:10px;
  }
  .weui-cell{
    background-color: #fff;
  }
  .actions{
    height: 100%;
    padding:10px 0px;
    button{
      outline: none;
      border: none;
      padding:10px 20px;
      margin-right:10px;
      border-radius: 5px;
      background-color: #f90;
      &.refuse{
        background-color: orangered;
      }
    }
  }
}
  
</style>
